<template>
    <view>
        <view class="" style="height: 20rpx;">
            
        </view> 
        <button class="addorder" @click="showpop('propbox')" size="mini">添加道具</button>
        
        <gridTable ref="gridTable" align="center" :proplist="proplist"></gridTable>
        <view class="" style="height: 20rpx;">
            
        </view> 
        <view class="btns">
            <button class="addorder"  size="mini">返回</button>
            <button class="next-btn" type="primary" size="mini" >提交保存</button>
        </view>
        
        <uni-popup ref="propbox" type="bottom">
            <view class="addpropbox">
                <uni-forms :modelValue="propItem" ref="propItem" label-width="80px">
                    <uni-forms-item label="上级数据" required name="pid">
                        <view style="display: flex;align-items: center;height: 100%;">
                            <picker mode = "selector"
                            :range="proplist" 
                            range-key="title" 
                            @change="selproptype">
                                 <view style="display: flex;align-items: center;">
                                     <text class="client_name">{{propItem.p_name || "作为一级"}}</text>    &nbsp;&nbsp;&nbsp;&nbsp;<uni-icons type="bottom" size="18"></uni-icons>
                                 </view>
                             </picker>
                        </view>                        
                    </uni-forms-item>
                    <!-- 作为一级 -->
                    <template v-if="propItem.pid === ''">
                        <uni-forms-item label="道具图片" required name="thumb">
                            <view style="display: flex;align-items: center;height: 100%;">
                                <uni-icons type="image" size="60"></uni-icons>
                            </view>
                        </uni-forms-item>
                        <uni-forms-item label="道具名称" required name="title">
                            <uni-easyinput style="width: 450rpx;" v-model="propItem.title" placeholder="道具名称" />         
                        </uni-forms-item>
                         
                    </template>
                    <!-- 作为二级 -->
                    <template v-else>
                        <uni-forms-item label="图纸编号" name="drawing">
                            <uni-easyinput style="width: 450rpx;" v-model="propItem.drawing" placeholder="图纸编号" />
                        </uni-forms-item>
                        <uni-forms-item label="生产位置" required name="position">
                            <uni-easyinput style="width: 450rpx;" v-model="propItem.position" placeholder="生产位置" />
                        </uni-forms-item>
                        <uni-forms-item label="具体部件" name="title">
                            <uni-easyinput style="width: 450rpx;" v-model="propItem.title" placeholder="具体部件" />
                        </uni-forms-item>
                        <uni-forms-item label="数量" required name="num">
                            <uni-easyinput style="width: 450rpx;" v-model="propItem.num" placeholder="数量" />
                        </uni-forms-item>
                        <uni-forms-item label="单位" required name="unit">
                            <uni-easyinput style="width: 450rpx;" v-model="propItem.unit" placeholder="单位" />
                        </uni-forms-item>
                        <uni-forms-item label="规格" required name="spec">
                            <uni-easyinput style="width: 450rpx;" v-model="propItem.spec" placeholder="规格" />
                        </uni-forms-item>
                        <uni-forms-item label="描述" required name="desc">
                            <uni-easyinput style="width: 450rpx;" v-model="propItem.desc" placeholder="描述" />
                        </uni-forms-item>
                        <uni-forms-item label="备注" name="msg">
                            <uni-easyinput style="width: 450rpx;" v-model="propItem.msg" placeholder="备注" />
                        </uni-forms-item>
                    </template>
                    <view class="btns">
                        <button type="primary" size="mini" @click="addprop('propItem')">添加</button>
                    </view>
                </uni-forms>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    import gridTable from '@/components/table.vue';
    var def_prop = {
        id:0,
        pid:'',
        thumb:'',
        title:'',
        drawing:'',
        position:'',
        num:1,
        unit:'件',
        spec:"",
        desc:'',
        msg:'',
        p_name:'',
        p_index:''
    }
    export default{
        data(){
            return{
                proplist:[
                  {
                    id:0,  
                    thumb:'空',
                    title:'空',
                    child:[
                        {
                            id:0,
                            drawing:'xxx',
                            position:'B',
                            title:"1014B柱",
                            num:1,
                            unit:'件',
                            spec:"170*140*60",
                            desc:'镜面不锈钢，密度板所有面贴橡木皮',
                            msg:''
                        },
                       {
                           id:0,
                           drawing:'xxx',
                           position:'A',
                           title:"1014A柱",
                           num:1,
                           unit:'件',
                           spec:"170*140*60",
                           desc:'镜面不锈钢，密度板所有面贴橡木皮',
                           msg:''
                       },
                    ]
                  },{
                      thumb:'',
                      title:'这啥呀这是',
                      child:[
                        {
                             id:0,
                             drawing:'xxx',
                             position:'B',
                             title:"1014B柱",
                             num:1,
                             unit:'件',
                             spec:"170*140*60",
                             desc:'镜面不锈钢，密度板所有面贴橡木皮',
                             msg:''
                         }
                         
                      ]
                  },{
                      thumb:'',
                      title:'这啥呀这是',
                      child:[
                        {
                             id:0,
                             drawing:'xxx',
                             position:'B',
                             title:"1014B柱",
                             num:1,
                             unit:'件',
                             spec:"170*140*60",
                             desc:'镜面不锈钢，密度板所有面贴橡木皮',
                             msg:''
                         },{
                             id:0,
                             drawing:'xxx',
                             position:'B',
                             title:"1014B柱",
                             num:1,
                             unit:'件',
                             spec:"170*140*60",
                             desc:'镜面不锈钢，密度板所有面贴橡木皮',
                             msg:''
                         }
                         
                      ]
                  }    
                ],
                
                           
                propItem:new Object(def_prop),
            }
        },
        components:{
            gridTable
        },
        onShow(){
            var _this = this
            setTimeout(function(){
                
                console.log(_this.$refs.gridTable.updatetable())
            },500)
        },
        methods:{
            showpop(ref){
                this.propItem = JSON.parse(JSON.stringify(def_prop))
                this.$refs[ref].open('center')
            },
            selproptype(e){
                var item = this.proplist[e.detail.value]
                this.propItem.p_name = item.title
                this.propItem.pid = item.id
                this.propItem.p_index = e.detail.value
            },
            addprop(ref){
                this.$refs[ref].validate().then(res => {
                   if(this.propItem.p_index!==''){
                       if(!this.propItem.spec){
                           this.$error("请完善规格")
                           return
                       }
                       this.proplist[this.propItem.p_index].child.push({
                           id:this.propItem.id,
                           drawing:this.propItem.drawing || " ",
                           position:this.propItem.position || " ",
                           title:this.propItem.title || " ",
                           num:this.propItem.num || 1,
                           unit:this.propItem.unit || "件",
                           spec:this.propItem.spec || " ",
                           desc:this.propItem.desc || " ",
                           msg:this.propItem.msg || " "
                       })
                   }else{
                       this.proplist.push({
                           id:this.propItem.id,
                           thumb:this.propItem.thumb || " ",
                           title:this.propItem.title || " ",
                           child:[
                               
                           ]
                       })
                   } 
                   console.log(this.proplist) 
                   this.$refs.propbox.close()
                   uni.showLoading({
                       
                   })
                   var _this = this
                   setTimeout(function(){
                       uni.hideLoading()
                       _this.$refs.gridTable.updatetable()
                   },500)
                }).catch(err => {
                    console.log('err', err);
                })
            }
        }
    }
</script>

<style>
</style>